<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>AlloyPhoto Demo1</title>
  <style type="text/css">
img{
  width:200px;
  height:200px;
}
  </style>
  <script type="text/javascript" src="../combined/alloyimage.js"></script>
</head>
<body>
<img id="pic" src="../res/img/1.jpg" alt="" />	
<img id="pic" src="../res/img/2.jpg" alt="" />	
<img id="pic" src="../res/img/3.jpg" alt="" />	
<script type="text/javascript">
var pics = document.getElementsByTagName("img");

for(var i = 0;i < pics.length;i ++){
  pics[i].loadOnce(function(){
      /*
         防止用onload事件注册后  replace会改变img的src导致onload事件再次触发形成循环
      */

      var picTranseObj = psLib(this);//创建一个psLib对象
      var origin = picTranseObj.clone();//克隆原始对象做为原始副本

      var grayPic = picTranseObj.act("灰度处理");
      grayPic.replace(this);

      this.onmouseover = function(){
          origin.replace(this);
      };

      this.onmouseout = function(){
          grayPic.replace(this);
      };

  });
}
</script>
</body>
</html>
